<template>
  <div class="ProductDetails">
    <div class="banner">
      <img src="@/assets/images/product/bg2.jpg" alt="" />
    </div>
    <!-- 详细信息 -->
    <div class="details">
      <div class="left">
        <div class="cover">
          <img :src="baseUrl + activeCover" alt="" />
        </div>
        <div class="list">
          <div class="slider">
            <div
              class="slider-item"
              v-for="(item, index) in goods.banner?.split('||') || []"
              :key="index"
              @click="activeCover = item"
            >
              <img :src="baseUrl + item" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">{{ goods.name }}</div>
        <div class="start">
          <i
            v-for="item in 5"
            :key="item"
            class="iconfont icon-shoucang1"
            :class="goods.start >= item ? 'active' : ''"
          ></i>
          <span>( {{ goods.start }}星推荐 )</span>
        </div>
        <div class="price">
          <span>￥{{ nowPrice }}</span>
          <span
            >-
            {{
              goods.number > 0 ? "现货（还剩" + goods.number + "件）" : "缺货"
            }}</span
          >
        </div>
        <div class="scription">
          {{ goods.scription }}
        </div>
        <div class="dimension">
          <p>尺寸：</p>
          <div>
            <span
              v-for="(item, index) in goods.size?.split('&')"
              :key="index"
              :class="item == checkSize ? 'active' : ''"
              @click="checkSize = item"
              >{{ item }}</span
            >
          </div>
        </div>
        <div class="color">
          <p>颜色：</p>
          <div>
            <span
              v-for="(item, index) in goods.color?.split('&')"
              :key="index"
              :style="{ backgroundColor: item }"
              :class="item == checkColor ? 'active' : ''"
              @click="checkColor = item"
              >{{ item ? "" : "默认" }}</span
            >
          </div>
        </div>
        <div class="quantity">
          <p>数量</p>
          <div>
            <div class="button">
              <i
                class="iconfont icon-jian"
                @click="checkNumber - 1 < 1 ? 1 : checkNumber--"
              ></i>
              <input type="text" v-model="checkNumber" />
              <i
                class="iconfont icon-jia1"
                @click="checkNumber + 1 > 5 ? 5 : checkNumber++"
              ></i>
            </div>
            <div class="like">
              <span><i class="iconfont icon-aixin"></i>添加收藏</span>
            </div>
            <div class="cart">
              <span>添加购物车<i class="iconfont icon-jia"></i></span>
            </div>
          </div>
        </div>
        <div class="message">
          <p>
            <span class="title">商品标签 :</span>
            <span>{{ goods.tag?.split("&").join(",") }}</span>
          </p>
          <p>
            <span class="title">SKU :</span>
            <span>H#21546</span>
          </p>
          <p>
            <span class="title">分享 :</span>
            <span>
              <i class="iconfont icon-QQ"></i>
              <i class="iconfont icon-weixin"></i>
              <i class="iconfont icon-weibo"></i>
            </span>
          </p>
        </div>
      </div>
    </div>
    <!-- 更多信息 -->
    <div class="details-more">
      <div class="navbar">
        <span @click="navbar = 0" :class="navbar == 0 ? 'active' : ''"
          >详情</span
        >
        <span @click="navbar = 1" :class="navbar == 1 ? 'active' : ''"
          >信息</span
        >
        <span @click="navbar = 2" :class="navbar == 2 ? 'active' : ''"
          >评论</span
        >
      </div>
      <div class="container">
        <transition-group name="hello" appear>
          <!-- 详情 -->
          <div v-if="navbar == 0" key="0" class="more_message">
            <p>
              {{ goods.scription }}
            </p>
            <p>
              这些将包括核心疫苗，分为三个系列：6周、12周和16周龄。“狼的丹丹”。这只狗来自一只古老的、已灭绝的狼，而现代灰狼则是这只狗的近亲。包括核心疫苗在内，这些疫苗都是注射的
            </p>
          </div>
          <!-- 信息 -->
          <div v-if="navbar == 1" key="1" class="information">
            <div class="left">
              <img :src="baseUrl + goods.cover" alt="" />
            </div>
            <div class="right">
              <div class="title">{{ goods.name }}</div>
              <div class="scription">
                {{ goods.scription }}
              </div>
              <ul>
                <li><span></span>65%聚，35%人造丝</li>
                <!-- <li><span></span>部分衬里</li> -->
                <li><span></span>隐藏式前按钮闭合，带有锁孔</li>
                <!-- <li><span></span>纽扣袖口</li> -->
                <li><span></span>轻质半透明制造</li>
                <li><span></span>中国制造</li>
              </ul>
            </div>
          </div>
          <!-- 评论 -->
          <div v-if="navbar == 2" key="2" class="review">
            <div class="title">用户评论 (0)</div>
            <span class="noReview">暂无评论</span>
            <span class="write">写一条评论</span>
          </div>
        </transition-group>
      </div>
    </div>
    <!-- 推荐商品 -->
    <div class="related-roducts">
      <h3>推荐商品</h3>
      <div class="container">
        <div class="item" v-for="item in recommend" :key="item.id">
          <router-link
            :to="`/product/${item.id}`"
            @click.native="goToGoods(item.id)"
            class="Img"
          >
            <img :src="baseUrl + item.cover" alt="" />
          </router-link>
          <div class="title">
            <router-link :to="`/product/${item.id}`">{{
              item.name
            }}</router-link>
          </div>
          <div class="price">
            <span>￥{{ item.price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAxiosGoodDetails, getAxiosGoodsList } from "@/api";
export default {
  name: "ProductDetails",
  data() {
    return {
      // 更多选项卡切换
      navbar: 0,
      goods: {},
      activeCover: "",
      checkSize: "",
      checkColor: "",
      checkNumber: 1,
      recommend: [], 
    };
  },
  computed: {
    nowPrice() {
      return (this.goods.price * this.checkNumber).toFixed(2);
    },
  },

  mounted() {
    this.getGoods();
    this.getRecommend();
  },
  methods: {
    async getGoods() {
      const res = await getAxiosGoodDetails(this.$route.params.id);
      this.goods = res.result;
      this.activeCover = res.result.cover;

      this.checkSize = res.result?.size.split("&")[0];
      this.checkColor = res.result?.color.split("&")[0];
    },

    // 获取推荐数据
    async getRecommend() {
      const id = this.$route.params.id;
      const res = await getAxiosGoodsList(id * 1 + 1, 4);
      this.recommend = res.result;
      console.log(res.result);
    },

    goToGoods() {
      this.getGoods();
    },
  },
};
</script>

<style lang="less" scoped>
.ProductDetails {
  .banner {
    img {
      width: 100%;
    }
  }
  .details {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding-top: 40px;
    padding-bottom: 40px;
    .left {
      flex-basis: 50%;
      .cover {
        width: 590px;
        height: 590px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .list {
        padding-top: 14px;
        .slider {
          display: flex;
          .slider-item {
            cursor: pointer;
            width: 120px;
            margin-right: 14px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .right {
      flex: 1;
      padding-left: 40px;
      box-sizing: border-box;
      .title {
        font-size: 36px;
        font-weight: bold;
        color: #111;
      }
      .start {
        padding-top: 30px;
        i {
          font-size: 14px;
          padding-right: 4px;
          color: #ccc;
          &.active {
            color: #febd00;
          }
        }
        span {
          color: #666;
          font-size: 14px;
          padding-left: 10px;
        }
      }
      .price {
        padding: 20px 0;
        display: flex;
        align-items: center;
        span {
          &:first-child {
            color: #333;
            font-size: 28px;
            font-weight: bold;
          }
          &:last-child {
            color: #f04336;
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
            letter-spacing: 1px;
          }
        }
      }
      .scription {
        color: #666;
        font-size: 16px;
        letter-spacing: 1px;
        line-height: 28px;
      }
      .dimension {
        > p {
          color: #333;
          font-size: 16px;
          font-weight: bold;
          padding-top: 20px;
          padding-bottom: 16px;
        }
        > div {
          display: flex;
          span {
            cursor: pointer;
            color: #999;
            font-size: 14px;
            // font-weight: bold;
            padding: 10px 26px;
            background-color: #f5f2eb;
            border: 1px solid #ececec;
            margin-right: 10px;
            &.active {
              background-color: #000;
              color: #fff;
            }
          }
        }
      }
      .color {
        > p {
          color: #333;
          font-size: 16px;
          font-weight: bold;
          padding-top: 20px;
          padding-bottom: 16px;
        }
        > div {
          display: flex;
          span {
            line-height: 38px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #333;

            cursor: pointer;
            width: 44px;
            height: 44px;
            display: block;
            border-radius: 8px;
            box-sizing: border-box;
            margin-right: 10px;
            &.active {
              border: 3px solid #333;
            }
          }
        }
      }
      .quantity {
        > p {
          color: #333;
          font-size: 16px;
          font-weight: bold;
          padding-top: 20px;
          padding-bottom: 16px;
        }
        > div {
          display: flex;
          .button {
            border: 1px solid #e1e1e1;
            border-radius: 6px;
            overflow: hidden;
            i {
              cursor: pointer;
              font-size: 12px;
              padding: 25px 12px;
              color: #333;
            }
            input {
              width: 60px;
              height: 45px;
              box-sizing: border-box;
              border: none;
              outline: none;
              padding: 0 10px;
              text-align: center;
              color: #000;
              font-size: 14px;
              font-weight: bold;
              border-left: 1px solid #e1e1e1;
              border-right: 1px solid #e1e1e1;
            }
          }
          .like {
            cursor: pointer;
            flex-basis: 140px;
            height: 45px;
            border: 1px solid #e1e1e1;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-left: 10px;
            border-radius: 6px;
            transition: all 0.4s;
            &:hover {
              background-color: #f04336;
              border-color: #f04336;
              span,
              i {
                color: #fff;
              }
            }
            span {
              text-align: center;
              width: 100%;
              font-size: 14px;
              font-weight: bold;
              color: #333;
              transition: all 0.4s;
              i {
                color: #333;
                padding-right: 6px;
                font-size: 13px;
                transition: all 0.4s;
              }
            }
          }
          .cart {
            cursor: pointer;
            flex-basis: 140px;
            height: 45px;
            border: 1px solid #e1e1e1;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-left: 10px;
            border-radius: 6px;
            transition: all 0.4s;
            background-color: #000;
            &:hover {
              background-color: #f04336;
              border-color: #f04336;
              span,
              i {
                color: #fff;
              }
            }
            span {
              text-align: center;
              width: 100%;
              font-size: 14px;
              font-weight: bold;
              color: #fff;
              transition: all 0.4s;
              i {
                color: #fff;
                padding-left: 6px;
                font-size: 13px;
                transition: all 0.4s;
              }
            }
          }
        }
      }
      .message {
        padding-top: 40px;
        p {
          margin: 12px 0;
          span {
            line-height: 20px;
            &.title {
              color: #333;
              font-size: 16px;
              font-weight: bold;
              margin-right: 10px;
            }
            &:last-child {
              font-size: 14px;
              color: #666;
            }
            i {
              font-size: 20px;
              padding: 0 6px;
              vertical-align: -2px;
              &:hover {
                cursor: pointer;
                color: #f04336;
              }
            }
          }
        }
      }
    }
  }
  .details-more {
    width: 1200px;
    margin: 0 auto;
    .navbar {
      height: 27px;
      border-bottom: 1px solid #ccc;
      span {
        cursor: pointer;
        color: #333;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        margin-right: 20px;
        letter-spacing: 4px;
        padding-bottom: 6px;
        &.active {
          color: #f04336;
          border-bottom: 3px solid #f04336;
        }
      }
    }
    .container {
      .more_message {
        margin: 30px 0;
        transition: all 0.8s ease;
        p {
          color: #666;
          font-size: 16px;
          margin-bottom: 16px;
          line-height: 24px;
        }
      }
      .information {
        display: flex;
        margin: 30px 0;
        transition: all 0.8s ease;
        .left {
          flex-basis: 24%;
          img {
            width: 100%;
          }
        }
        .right {
          flex: 1;
          padding-left: 30px;
          box-sizing: border-box;
          .title {
            font-size: 20px;
            font-weight: bold;
          }
          .scription {
            padding: 20px 0;
            font-size: 16px;
            color: #666;
            line-height: 30px;
          }
          ul {
            li {
              line-height: 20px;
              padding-bottom: 10px;
              color: #666;
              span {
                display: inline-block;
                width: 6px;
                height: 6px;
                background-color: #333;
                margin-right: 8px;
                vertical-align: 3px;
              }
            }
          }
        }
      }
      .review {
        margin: 30px 0;
        border: 1px solid #e1e1e1;
        padding: 30px;
        box-sizing: border-box;
        position: relative;
        transition: all 0.8s ease;
        .title {
          color: #333;
          font-size: 18px;
          font-weight: bold;
          padding-bottom: 20px;
        }
        .noReview {
          color: #666;
          font-size: 14px;
        }
        .write {
          cursor: pointer;
          position: absolute;
          right: 30px;
          bottom: 30px;
          font-size: 14px;
          font-weight: bold;
          color: #999;
          &:hover {
            color: #333;
            text-decoration: underline;
          }
        }
      }
      .hello-enter {
        transform: translateY(20px);
        opacity: 0;
      }
      /* 进入的终点，离开的起点 */
      .hello-leave {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
  .related-roducts {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 60px;
    h3 {
      font-size: 24px;
      color: #333;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        flex-basis: 23%;
        margin-top: 2.5%;
        .Img {
          display: block;
          img {
            width: 100%;
          }
        }
        .title {
          padding-top: 20px;
          margin-bottom: 14px;
          text-align: center;
          a {
            font-size: 18px;
            color: #333;
            text-decoration: none;
            transition: all 0.4s;
            &:hover {
              color: #8e5f37;
            }
          }
        }
        .price {
          justify-content: space-between;
          // padding-bottom: 20px;
          text-align: center;
          span {
            font-weight: bold;
            font-size: 18px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>